<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
	<title>神曲</title>
	<link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <style>
        img.avatar {
            width: 18px;
            height: 18px;
            border-radius: 50%;
        }
        .boxCont{
            position:relative;
        }
    </style>
</head>

<body>
	 <div class="aui-content">
        <ul class="aui-waterfall" id="aui-waterfall"> 
            <li onclick="openPlay();" > 
                <div class="aui-waterfall-header">
                    <img src="../image/1.png" />
                </div>
                <div class="aui-waterfall-body">
                    最浪漫的事
                </div>
                <div class="aui-waterfall-footer"> 
                    <span class="aui-text-info">
                        杨钰莹
                    </span>
                    <span class="aui-pull-right">
                        <i class="aui-iconfont aui-icon-likefill aui-text-warning"></i>
                    </span>
                </div> 
            </li>
            <li onclick="openLunbo2();" > 
                <div class="aui-waterfall-header">
                    <img src="../image/2.png" />
                </div>
                <div class="aui-waterfall-body">
                    在人间
                </div>
                <div class="aui-waterfall-footer"> 
                    <span class="aui-text-info">
                        王建房
                    </span>
                    <span class="aui-pull-right">
                        <i class="aui-iconfont aui-icon-likefill aui-text-warning"></i>
                    </span>
                </div> 
            </li>
            <li> 
                <div class="aui-waterfall-header">
                    <img src="../image/3.png" />
                </div>
                <div class="aui-waterfall-body">
                    最炫民族风
                </div>
                <div class="aui-waterfall-footer"> 
                    <span class="aui-text-info">
                        凤凰传奇
                    </span>
                    <span class="aui-pull-right">
                        <i class="aui-iconfont aui-icon-likefill aui-text-warning"></i>
                    </span>
                </div> 
            </li>
            <li> 
                <div class="aui-waterfall-header">
                    <img src="../image/4.png" />
                </div>
                <div class="aui-waterfall-body">
                    ppap
                </div>
                <div class="aui-waterfall-footer"> 
                    <span class="aui-text-info">
                        黄猿
                    </span>
                    <span class="aui-pull-right">
                        <i class="aui-iconfont aui-icon-likefill aui-text-warning"></i>
                    </span>
                </div> 
            </li>
            <li> 
                <div class="aui-waterfall-header">
                    <img src="../image/4.png" />
                </div>
                <div class="aui-waterfall-body">
                    甩葱歌
                </div>
                <div class="aui-waterfall-footer"> 
                    <span class="aui-text-info">
                        bibi
                    </span>
                    <span class="aui-pull-right">
                        <i class="aui-iconfont aui-icon-likefill aui-text-warning"></i>
                    </span>
                </div> 
            </li>
            <li> 
                <div class="aui-waterfall-header">
                    <img src="../image/3.png" />
                </div>
                <div class="aui-waterfall-body">
                    江南style
                </div>
                <div class="aui-waterfall-footer"> 
                    <span class="aui-text-info">
                        鸟叔
                    </span>
                    <span class="aui-pull-right">
                        <i class="aui-iconfont aui-icon-likefill aui-text-warning"></i>
                    </span>
                </div> 
            </li>
            <li> 
                <div class="aui-waterfall-header">
                    <img src="../image/2.png" />
                </div>
                <div class="aui-waterfall-body">
                    我该怎么做
                </div>
                <div class="aui-waterfall-footer"> 
                    <span class="aui-text-info">
                        吉山幼儿园
                    </span>
                    <span class="aui-pull-right">
                        <i class="aui-iconfont aui-icon-likefill aui-text-warning"></i>
                    </span>
                </div> 
            </li>
            <li> 
                <div class="aui-waterfall-header">
                    <img src="../image/2.png" />
                </div>
                <div class="aui-waterfall-body">
                    在人间
                </div>
                <div class="aui-waterfall-footer"> 
                    <span class="aui-text-info">
                        王建房
                    </span>
                    <span class="aui-pull-right">
                        <i class="aui-iconfont aui-icon-likefill aui-text-warning"></i>
                    </span>
                </div> 

        </ul> 
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui.js"></script>
<script type="text/javascript" src="../script/aui-waterfall.js" ></script>
<script type="text/javascript">
    $aui.waterfall($api.byId("aui-waterfall"),{
        col:2,//列数
        padding:10,//容器内边距
        space:10//列间距
    });

    

    function openPlay(){
        api.openWin({
            name:'musicPlay',
            url:'player.html',
            pageParam:{
                name:'最浪漫的事',
                path:'romam.mp3'
            }
        });
    }
    

    function openLunbo2(){
        api.openWin({
            name:'musicPlay',
            url:'lunbo.html',
            pageParam:{
                name:'最浪漫的事',
                path:'romam.mp3'
            }
        });
    }

</script>
</html>